<template>
  <div class="session-list">
    <div class="session-top">
      <div class="session-search">
        <i class="iconfont icon-sousuoxiao"></i>
        <input type="text" placeholder="搜索">
      </div>
    </div>

    <!-- 新的朋友 -->
    <div class="friend-list-container">
      <div class="session-item" @click="selectFriend({id:-1})" :class="$store.state.currentFriend && $store.state.currentFriend.id === -1 ? 'current-session' : ''">
        <div class="cover"><img src="../assets/img/newFriend.png" alt=""></div>
        <div class="session-info">
          <div class="session-name">新的好友</div>
        </div>
      </div>
      <!-- 好友列表 -->
      <div class="session-item" :class="$store.state.currentFriend && $store.state.currentFriend.id === item.id ? 'current-session' : ''" @click="selectFriend(item)" @click.right.prevent="rightClick($event, item)" v-for="item in $store.state.friendListData.list" :key="item.id">
        <div class="cover"><img :src="item.avatar" alt=""></div>
        <div class="session-info">
          <div class="session-name">{{ item.userName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api_getFriendList, api_deleteFriend } from '@/api/friend'
export default {
  name: 'friend-list',
  data () {
    return {
      that: this,
      friendList: Array,
      // 当前的frined
      // currentFriend: null,
    }
  },
  created () {
    if (!this.$store.state.friendListData.isReq) {
      // 请求好友列表
      api_getFriendList().then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setFriendListData', {
            isReq: true,
            list: res.data.list
          })
        }
      })
    }
  },
  methods: {
    selectFriend (item) {
      // console.log(item);
      if (this.$store.state.currentFriend && this.$store.state.currentFriend.id === item.id) return
      // this.currentFriend = item;
      // this.$bus.$emit('selectFriend', item)
      this.$store.commit('setCurrentFriend', item)
    },

    // 点击右键的回调
    rightClick (e, friend) {
      console.log(friend);
      this.$bus.$emit('rightMenu', {
        position: { x: e.x, y: e.y },
        menuList: [{
          content: '解除好友关系',
          callback: () => {
            api_deleteFriend({ friendId: friend.id }).then(res => {
              if (res.data.code === 200) {
                this.$message.success('已成功解除好友关系')
                this.$store.commit('deleteFriend', friend.id)
              } else {
                this.$message.error('删除好友失败!')
              }
            })
          },
        }]
      })
    },
  },
  filters: {
    timeHander (time, that) {
      return that.$moment(time).format('HH:mm')
    }
  },
}
</script>

<style scoped>
.session-list {
  width: 250px;
  /* background-color: #e6e5e5; */
  background-color: #fff;
  text-align: left;
  border-right: 1px solid #ddd;
}

.session-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  border-bottom: 1px solid #ddd;
  /* background-color: #f7f7f7; */
  background-color: #fff;
  padding: 10px;
}

.session-search {
  padding: 3px 8px;
  /* background-color: #e2e2e2; */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
}

.icon-sousuoxiao,
.session-search > input {
  font-size: 12px;
  border: none;
  /* background-color: #e2e2e2; */
  background-color: #fff;
  color: rgb(95, 95, 95);
}

.session-search input {
  width: 193px;
}

.icon-sousuoxiao {
  margin-right: 6px;
}

.session-search > input:focus {
  outline: none;
}

.session-item {
  display: flex;
  padding: 10px;
  cursor: pointer;
}

.session-item:hover {
  /* background-color: #d8d8d8; */
  background-color: #f2f2f2;
}

.current-session {
  /* background-color: #c5c5c6; */
  background-color: #ebebeb;
}

.current-session:hover {
  /* background-color: #c5c5c6; */
  background-color: #ebebeb;
}

.cover {
  height: 40px;
  width: 40px;
}

.cover img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.session-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 180px;
  margin-left: 10px;
}

.session-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.friend-list-container {
  height: calc(100vh - 55px);
  overflow-y: auto;
}
</style>